<template>
  <my-layout ref="my-layout" :tabbar-is-show="true" :tab-bar-index="2">
    <template #TopBackground>
      <my-top-background />
    </template>
    <template #Navbar>
      <view
        style="
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        "
      >
        <!--地理位置选择-->
        <view
          @click="popIsShow = true"
          style="
            margin-left: 34rpx;
            height: 66rpx;
            background-color: #ffffff;
            border-radius: 100rpx;
            display: flex;
          "
        >
          <view
            style="
              font-size: 28rpx;
              color: #333;
              line-height: 40rpx;
              margin-left: 30rpx;
              margin-top: 12rpx;
            "
            >{{ city.name ? city.name : "定位失败" }}</view
          >
          <image
            :src="indexTabBarUrl.redDownUrl"
            style="
              width: 20rpx;
              height: 14rpx;
              vertical-align: top;
              margin-left: 4rpx;
              margin-right: 30rpx;
              margin-top: 26rpx;
            "
          />
        </view>
      </view>
    </template>
    <template #Body>
      <view class="pf_top_con" :style="{ backgroundPosition: `center top}` }">
        <view class="top_setions">
          <!--伴你笑开怀-->
          <view
            style="
              width: 100%;
              display: flex;
              justify-content: space-between;
              margin-top: 22rpx;
            "
          >
            <view
              style="
                width: 330rpx;
                height: 112rpx;
                margin-left: 32rpx;
                position: relative;
              "
            >
              <image
                style="width: 100%; height: 100%"
                :src="indexTabBarUrl.happyTextUrl"
              ></image>
              <view
                style="
                  left: 318rpx;
                  top: 38rpx;
                  position: absolute;
                  border-radius: 8rpx;
                  background-color: #fbd632;
                "
              >
                <view
                  style="
                    font-size: 18rpx;
                    line-height: 26rpx;
                    margin-left: 8rpx;
                    margin-right: 8rpx;
                    white-space: nowrap;
                  "
                  >{{ city.name ? city.name : "定位失败" }}</view
                >
              </view>
            </view>
          </view>
          <!--搜索-->
          <view class="searchs">
            <input
              type="text"
              placeholder="输入您喜爱的演员名字"
              class="search_text"
            />
            <view class="search_btn">搜索</view>
          </view>
          <!--演员分类-->
          <scroll-view class="star_sel" scroll-x="true">
            <view
              class="star_item"
              @click="goperformers(pitem.id)"
              v-for="(pitem, pkey) in performerArr"
              :key="pkey"
            >
              <view>
                <image mode="aspectFill" :src="pitem.pictures[0]"></image>
                <text>{{ pitem.name }}</text>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
      <!--明人栏目-->
      <view class="star_column">
        <view class="star_menu">
          <view class="star_title">
            <image
              src="http://llg.qiniu.comeinvip.com/images/pf_font01.png"
            ></image>
          </view>
          <view class="star_fun">
            <view @click="goFans()" class="star_fun01">粉丝群</view>
            <view @click="goContribute()" class="star_fun02">段子征集</view>
          </view>
        </view>
        <view class="star_cons">
          <image
            class="star_potho"
            @click="goBroadcast()"
            src="http://llg.qiniu.comeinvip.com/images/zbs.png"
          >
          </image>
          <view class="star_con_info">
            <view class="star_con_line">
              <view class="star_c_in01">
                <image
                  src="http://llg.qiniu.comeinvip.com/images/pl03.png"
                ></image>
                <view class="star_c_num">
                  <text class="star_c_n_01">13345</text>
                  <text class="star_c_n_01">点赞数</text>
                </view>
              </view>
              <view class="star_c_in01">
                <image
                  src="http://llg.qiniu.comeinvip.com/images/pl02.png"
                ></image>
                <view class="star_c_num">
                  <text class="star_c_n_01">13345</text>
                  <text class="star_c_n_01">评论数</text>
                </view>
              </view>
            </view>
            <view class="star_con_line">
              <view class="star_c_in01" @click="openscroling()">
                <image
                  src="http://llg.qiniu.comeinvip.com/images/pl01.png"
                ></image>
                <view class="star_c_num">
                  <text class="star_c_n_01">13345</text>
                  <text class="star_c_n_01">打分数</text>
                </view>
              </view>
              <view class="star_c_in01">
                <image
                  src="http://llg.qiniu.comeinvip.com/images/pl04.png"
                ></image>
                <view class="star_c_num">
                  <text class="star_c_n_01">13345</text>
                  <text class="star_c_n_01">礼物数</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--视频-->
      <view style="overflow: hidden">
        <view class="pf_video" @click="goVideos()">
          <image
            class="pf_v_photo"
            mode="aspectFill"
            src="@/static/images/newxx.jpg"
          ></image>
          <view class="pf_screen_box"></view>
          <view class="pf_v_function">
            <view class="pf_v_01">
              <image
                src="http://llg.qiniu.comeinvip.com/images/plw03.png"
              ></image
              ><text>30</text>
            </view>
            <view class="pf_v_01">
              <image
                src="http://llg.qiniu.comeinvip.com/images/plw02.png"
              ></image
              ><text>324</text>
            </view>
            <view class="pf_v_01">
              <image
                src="http://llg.qiniu.comeinvip.com/images/plw01.png"
              ></image
              ><text>5.0</text>
            </view>
          </view>
        </view>
      </view>
    </template>
    <template #OutArea>
      <!--地理位置弹出层-->
      <geo-select v-model="popIsShow" />
      <!--打分层-->
      <view v-if="scorShow" @click="pfcoreClose" class="scoring_scrren"></view>
      <view v-if="scorShow" class="scorings">
        <view class="scor01">
          <image
            @click="pfcoreClose"
            src="http://llg.qiniu.comeinvip.com/images/posclose.png"
          ></image>
        </view>
        <text class="scor02">打分</text>
        <text class="scor03">《刘老根五周年大戏》</text>
        <text class="scor04">请您为这部戏打分</text>
        <view class="scor05">
          <image
            v-for="(item, ikey) in xxlist"
            @click="xxbtn(ikey)"
            :src="xingIndex >= ikey ? xxyellow : xxhui"
          ></image>
          <!-- <image :src="xxyellow"></image> -->
        </view>
        <view class="scor06">确认提交</view>
      </view>
    </template>
  </my-layout>
</template>

<script>
// import indexBackgroundImage from "@/static/images/top_bj.png"
import util from "@/utils/util.js";
import tabBar from "@/components/tabbar/tabbar.vue";
import navBar from "@/components/navbar/navbar.vue";
import configApi from "@/utils/config.js";
import MyPop from "@/components/my-pop/index.vue";
import indexTabBarUrl from "@/url/index_tabBar";
import { mapState } from "vuex";

export default {
  components: {
    MyPop,
    "tab-bar": tabBar,
    "nav-bar": navBar,
  },
  computed: {
    ...mapState(["city"]),
  },
  data() {
    return {
      popIsShow: false,
      indexTabBarUrl,
      // indexBackgroundImage:indexBackgroundImage,
      isIphoneX: false,
      navbarData: {
        // 头部组件所需参数
        showCapsule: 0, //是否显示左上角返回图标   1表示显示    0表示不显示
        positionShow: 1, //0不显示定位 1 显示定位
        backgroundCor: 1, //0 无背影色 1首页背景颜色  1无背影色  2白色
        statusBarHeight: uni.getSystemInfoSync()["statusBarHeight"],
        navHeight: 45,
        title: "", //中间标题
        scrollWhite: 0, //0默认不改变 ,1 滚动时导航底部白底
      },
      scorShow: false,
      xxhui: "http://llg.qiniu.comeinvip.com/images/greyxx.png",
      xxyellow: "http://llg.qiniu.comeinvip.com/images/yellowxx.png",
      xxlist: [0, 1, 2, 3, 4],
      xingIndex: 0,
      performerArr: [],
    };
  },
  methods: {
    //跳转直播页
    goBroadcast() {
      uni.navigateTo({
        url: "/pages/content/liveBroadcast/liveBroadcast",
      });
    },
    //跳转粉丝群
    goFans() {
      uni.navigateTo({
        url: "/pages/others/funsGrounp/funsGrounp",
      });
    },
    //跳转稿子征集
    goContribute() {
      uni.navigateTo({
        url: "/pages/others/contribute/contribute",
      });
    },
    //关闭打分
    pfcoreClose() {
      this.scorShow = false;
    },
    //打开打分层
    openscroling() {
      this.scorShow = true;
    },
    //跳转演员详情
    goperformers(id) {
      uni.navigateTo({
        url: "/pages/content/performerDetails/performerDetails?id=" + id,
      });
    },
    //跳转视频页
    goVideos() {
      uni.navigateTo({
        url: "/pages/content/videos/videos",
      });
    },
    //星星切换
    xxbtn(index) {
      this.xingIndex = index;
    },
  },
  created() {
    this.isIphoneX = util.getSystemInfoForPhone(); // 判断手机机型是否为iPhone X以上
  },
  onPageScroll(res) {
    if (res.scrollTop > 80) {
      this.navbarData.scrollWhite = 1;
    } else {
      this.navbarData.scrollWhite = 0;
    }
  },
  async onLoad() {
    try {
      this.$refs["my-layout"].openLoading();
      //获取演员列表
      let performerListPagination = await configApi.getPerformer();
      this._.forEach(performerListPagination.data, (item) => {
        item.pictures = JSON.parse(item.pictures).map((item) => item.url);
      });
      this.performerArr = performerListPagination.data;
      this.$refs["my-layout"].closeLoading();
    } catch (error) {
      this.$refs["my-layout"].closeLoading();
      wx.showToast({
        title: "网络异常",
        icon: "error",
        mask: true,
      });
    }
  },
};
</script>

<style>
@import url(@/static/css/index.css);
@import url(@/static/css/performer.css);
</style>
